<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		// 修改供应商 联动：商品类别、商品名称、采购数量、单价、合计、总计
		$("#supplier").change(function(){
			var supplierUuid = $(this).val();
			// ajax获取类别信息+商品信息，查询条件：供应商uuid
			$.post("order_ajaxGetGtAndG.action",{"supplierUuid":supplierUuid},function(data){
				$(".goodsType").empty();
				$(".goods").empty();
				// 修改类别
				var goodsTypeList = data.goodsTypeList;
				for (var i = 0; i < goodsTypeList.length; i++) {
					var goodsType = goodsTypeList[i];
					$op = $("<option value='"+goodsType.uuid+"'>"+goodsType.name+"</option>");
					$(".goodsType").append($op);
				}
				// 修改商品
				var goodsList = data.goodsList;
				for (var j = 0; j < goodsList.length; j++) {
					var goods = goodsList[j];
					$op = $("<option value='"+goods.uuid+"'>"+goods.name+"</option>");
					$(".goods").append($op);
				}
				var price = data.goods.inPriceView;
				// 修改数量1
				$(".num").val(1);
				// 修改单价
				$(".prices").val(price);
				// 修改合计
				$(".total").html(price + " 元");
				// 计算总价
		        total2();
			});
		});
		
		// 修改商品类别 联动：商品名称、采购数量、单价、合计、总计
		$(".goodsType").live("change",function(){
			/* 优化前
				// 获取商品的select				td		td			select
				var $goodsSelect = $(this).parent().next().children("select");
				// 获取采购数量
				var $num = $(this).parent().next().next().children("input");
				// 获取单价
				var $prices = $(this).parent().next().next().next().children("input");
				// 获取合计
				var $totalPrice = $(this).parent().next().next().next().next();
			*/
			// 优化后
			// 获取当前行
			var $nowTr = $(this).parent().parent();
			// 获取当前行 tr 索引为1的子元素td
			var $goodsSelect = $nowTr.children("td:eq(1)").children("select");
			var $num = $nowTr.children("td:eq(2)").children("input");
			var $prices = $nowTr.children("td:eq(3)").children("input");
			var $totalPrice = $nowTr.children("td:eq(4)");

			var goodsArr = $(".goods");
			var used = "";
			for (var i = 0; i < goodsArr.length; i++) {
				used = used + "'"+goodsArr[i].value + "',";
			}
			// 发送商品类别的uuid到后台，获取商品信息
			var goodsTypeUuid = $(this).val();
			$.post("order_ajaxGetGoods.action",{"goodsTypeUuid":goodsTypeUuid,"used":used},function(data){
				$goodsSelect.empty();
				// 修改商品
				var goodsList = data.goodsList;
				for (var j = 0; j < goodsList.length; j++) {
					var goods = goodsList[j];
					$op = $("<option value='"+goods.uuid+"'>"+goods.name+"</option>");
					$goodsSelect.append($op);
				}
				var price = data.goods.inPriceView;
				// 修改数量1
				$num.val(1);
				// 修改单价
				$prices.val(price);
				// 修改合计
				$totalPrice.html(price + " 元");
				// 计算总价
		        total2();
			});
		});
		
		// 修改商品名称 联动：采购数量、单价、合计、总计
		$(".goods").live("change",function(){
			var $nowTr = $(this).parent().parent();
			var $num = $nowTr.children("td:eq(2)").children("input");
			var $prices = $nowTr.children("td:eq(3)").children("input");
			var $totalPrice = $nowTr.children("td:eq(4)");
			var goodsUuid = $(this).val();
			$.post("order_ajaxGetPrice.action",{"goodsUuid":goodsUuid},function(data){
				var price = data.inPriceView;
				// 修改数量1
				$num.val(1);
				// 修改单价
				$prices.val(price);
				// 修改合计
				$totalPrice.html(price + " 元");
				// 计算总价
		        total2();
			});
		});
		
		// 定义新增按钮是否可点击
		var clickFlag = true;
		// 添加新订单
		$("#add").click(function(){
			$("#supplier").attr("disabled",true);
			$(".goodsType").attr("disabled",true);
			$(".goods").attr("disabled",true);
			if(!clickFlag){
				// 不可以业务操作
				return;
			}
			clickFlag = false;
			// 动态生成行
			// 在id为 finalTr 的上方添加
			var supplierUuid = $("#supplier").val();
			// 分析：当前页面上使用过的商品通知后台，后台获取到数据后，将页面上使用过的商品过滤掉，在传递到页面
			// 将页面使用过的商品uuid传递到后台，多个数据
			// 多个数据如何设置成参数，后台通过数组或集合接受
			// 使用字符串进行传值，后台接收
			// 使用的商品的uuid都在class="goods"的select中保存的
			var goodsArr = $(".goods");
			var used = "";
			for (var i = 0; i < goodsArr.length; i++) {
				used = used + "'"+goodsArr[i].value + "',";
			}
			$.post("order_ajaxGetGtAndG2.action",{"supplierUuid":supplierUuid,"used":used},function(data){
				$tr = $('<tr align="center" bgcolor="#FFFFFF"></tr>');
				// 商品类别select：class="goodsType"
				$td1 = $('<td height="30"></td>');
				$goodsTypeSelect = $('<select style="width:200px" class="goodsType"></select>');
				var goodsTypeList = data.goodsTypeList;
				for (var i = 0; i < goodsTypeList.length; i++) {
					var goodsType = goodsTypeList[i];
					$op = $('<option value="'+goodsType.uuid+'">'+goodsType.name+'</option>');
					$goodsTypeSelect.append($op);
				}
				$td1.append($goodsTypeSelect);
				$tr.append($td1);
				// 商品select：class="goods"
				$td2 = $('<td></td>');
				$goodsSelect = $('<select name="goodsUuids" class="goods" style="width:200px"></select>');
				var goodsList = data.goodsList;
				for (var i = 0; i < goodsList.length; i++) {
					var goods = goodsList[i];
					$op = $('<option value="'+goods.uuid+'">'+goods.name+'</option>');
					$goodsSelect.append($op);
				}
				$td2.append($goodsSelect);
				$tr.append($td2);
				// 数量input：class="num"
				$td3 = $('<td><input name="nums" type="text" value="1" class="num order_num" style="width:67px;border:1px solid black;text-align:right;padding:2px"/></td>');
				$tr.append($td3);
				// 单价
				var price = data.goods.inPriceView;
				$td4 = $('<td><input name="prices" type="text" value="'+price+'" class="prices order_num" style="width:93px;border:1px solid black;text-align:right;padding:2px"/>元</td>');
				$tr.append($td4);
				// 合计
				$td5 = $('<td class="total" align="right">'+price+'&nbsp;元</td>');
				$tr.append($td5);
				// 删除操作
				$td6 = $('<td><a class="deleteBtn delete xiu" href="javascript:void(0)" value="4"><img src="images/icon_04.gif" />删除</a></td>');
				$tr.append($td6);
				$("#finalTr").before($tr);
				
				// 可进行业务操作
				clickFlag = true;
				
				// 防止数组下标越界
				// 当类别中剩余一个时，商品中剩余一个时，隐藏按钮
				if(goodsTypeList.length == 1 && goodsList.length == 1){
					// 1
					// $("#add").hide();
					// 2
					$("#add").css("display","none");
				}
				// 计算总价
		        total2();
			});
		});
		// 删除
		// live 给当前和未来元素加事件
		$(".deleteBtn").live("click",function(){
			// 剩余一个删除链接，不执行此操作
			if($(".deleteBtn").length == 1){
				return;
			}
			// 获取当前行 tr
			var $nowTr = $(this).parent().parent();
			$nowTr.remove();
			$("#add").css("display","inline");
			// 计算总价
	        total2();
		});
		
		// 修改数量
		$(".num").live("keyup",function(){
			//先把非数字的都替换掉，除了数字和. 
			$(this).val($(this).val().replace(/[^\d]/g,""));
			/*
	        //必须保证第一个为数字而不是. 
	        $(this).val($(this).val().replace(/^\./g,"0."));
	        //保证只有出现一个.而没有多个. 
	        $(this).val($(this).val().replace(/\.{2,}/g,"."));
	        //保证.只出现一次，而不能出现两次以上
	        $(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$","."));
	        */
			totalPrice($(this));
	        // 计算总价
	        total2();
		});
		
		// 修改单价
		$(".prices").live("keyup",function(){
			//先把非数字的都替换掉，除了数字和. 
			$(this).val($(this).val().replace(/[^\d.]/g,""));
			//必须保证第一个为数字而不是. 
	        $(this).val($(this).val().replace(/^\./g,"0."));
	        //保证只有出现一个.而没有多个. 
	        $(this).val($(this).val().replace(/\.{2,}/g,"."));
	        //保证.只出现一次，而不能出现两次以上
	        $(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$","."));
			totalPrice($(this));
			// 计算总价
	        total2();
		});
		
		// 合计
		function totalPrice(obj){
			var $nowTr = obj.parent().parent();
			var $num = $nowTr.children("td:eq(2)").children("input");
			var $price = $nowTr.children("td:eq(3)").children("input");
			var $total = $nowTr.children("td:eq(4)");
			var total = $num.val() * $price.val();
			// 显示数据必须保留两位小数
			$total.html(intToFloat(total) + " 元");
		}
		
		// 总计
		function total2(){
			// 计算总价
	        // 获取所有的采购数量
	        var numArr = $(".num");
	        // 获取所有的采购单价
	        var priceArr = $(".prices");
	        // 相乘求和
	        var sum = 0;
	        for (var i = 0; i < numArr.length; i++) {
				var total = numArr[i].value * priceArr[i].value;
				sum += total;
			}
	        // 将总价放到总计位置
	        $(".all").html(intToFloat(sum) + " 元");
		}
		
		// 提交表单
		$("#submitOrder").click(function(){
			$("#supplier").attr("disabled",false);
			$(".goodsType").attr("disabled",false);
			$(".goods").attr("disabled",false);
			$("form:first").submit();
		});
	});
	
	// 保留两位小数
	function intToFloat(val){
		return new Number(val).toFixed(2);
	}
</script>
<div class="content-right">
	<div class="content-r-pic_w">
		<div style="margin:8px auto auto 12px;margin-top:6px">
			<span class="page_title">订单管理</span>
		</div>
	</div>
	<div class="content-text">
		<s:form action="order_buySave" method="post">
			<div class="square-o-top">
				<table width="100%" border="0" cellpadding="0" cellspacing="0"
					style="font-size:14px; font-weight:bold; font-family:"黑体";">
					<tr>
						<td height="24">&nbsp;</td>
					</tr>
					<tr>
						<td width="68px" height="30">供应商：</td>
						<td width="648px">
							<s:select name="order.supplier.uuid" id="supplier" list="supplierList" listKey="uuid" listValue="name" cssStyle="width:190px"></s:select>
						</td>
						<td height="30">
							<a id="add" href="javascript:void(0)"><img src="images/can_b_02.gif" border="0" /> </a>
						</td>
					</tr>
				</table>
			</div>
			<!--"square-o-top"end-->
			<div class="square-order">
				<table id="order" width="100%" border="1" cellpadding="0" cellspacing="0">
					<tr align="center"
						style="background:url(images/table_bg.gif) repeat-x;">
						<td width="25%" height="30">商品类别</td>
						<td width="25%">商品名称</td>
						<td width="10%">采购数量</td>
						<td width="15%">单价</td>
						<td width="15%">合计</td>
						<td width="10%">操作</td>
					</tr>
					<tr align="center" bgcolor="#FFFFFF">
						<td height="30">
							<s:select cssClass="goodsType" list="goodsTypeList" listKey="uuid" listValue="name" cssStyle="width:200px"></s:select>
						</td>
						<td>
							<s:select name="goodsUuids" cssClass="goods" list="goodsList" listKey="uuid" listValue="name" cssStyle="width:200px"></s:select>
						</td>
						<td><input name="nums" class="num order_num" style="width:67px;border:1px solid black;text-align:right;padding:2px" type="text" value="1"/></td>
						<td><input name="prices" class="prices order_num" style="width:93px;border:1px solid black;text-align:right;padding:2px" type="text" value="${goodsList[0].inPriceView }"/> 元</td>
						<td class="total" align="right">${goodsList[0].inPriceView }&nbsp;元</td>
						<td>
							<a class="deleteBtn delete xiu" href="javascript:void(0)" value="4"><img src="images/icon_04.gif" /> 删除</a>
						</td>
					</tr>
					<tr id="finalTr" align="center"
						style="background:url(images/table_bg.gif) repeat-x;">
						<td height="30" colspan="4" align="right">总&nbsp;计:&nbsp;</td>
						<td class="all" width="16%" align="right">${goodsList[0].inPriceView }&nbsp;元</td>
						<td>&nbsp;</td>
					</tr>
				</table>
				<div class="order-botton">
				<div style="margin:1px auto auto 1px;">
					<table width="100%"  border="0" cellpadding="0" cellspacing="0">
					  <tr>
					    <td>
					    	<a href="javascript:void(0)" id="submitOrder"><img src="images/order_tuo.gif" border="0" /></a>
					    </td>
					    <td>&nbsp;</td>
					    <td><a href="javascript:void(0)"><img src="images/order_tuo.gif" border="0" /></a></td>
					    <td>&nbsp;</td>
					    <td><a href="order_buyList.action"><img src="images/order_tuo.gif" border="0" /></a></td>
					  </tr>
					</table>
				</div>
			</div>
			</div>
		</s:form>
	</div>
	<div class="content-bbg"></div>
</div>